<template>
	<view class="">
		<!-- #ifdef APP-PLUS -->
		<view class="topPlace"></view>
		<!-- #endif -->
		<v-navigation :value="naviValue"></v-navigation>
		<view class="exchange_bg">
			<view class="jui_bg_fff jui_lrtop box   ">
				<view class="jui_flex jui_flex_items_center">
					<view class="">
						<text class="jui_fc_333 jui_fs32">{{taskDetail.symbol}}</text>
						<!-- <text class="jui_fc_999 jui_fs26">/USDT</text> -->
					</view>
					<view class="jui_flex jui_flex_items_center jui_flex_justify_center jui_bor_rad_15 on">
						<image src="../../../static/imgs/home/bs1.png"
							style="width: 20rpx;height: 20rpx;margin-right: 14rpx;" v-if="titName == '保守'"></image>
						<image src="../../../static/imgs/home/jj1.png"
							style="width: 20rpx;height: 20rpx;margin-right: 14rpx;" v-if="titName == '激进'"></image>
						{{titName}}
						<!-- <view class="">
							bi乘方
						</view>
						<view  class="  jui_mar_l12 text-rad" >
							市
						</view> -->
					</view>
				</view>
				<view class="jui_bor_bottom jui_pad_b20">
					<view class="jui_flex jui_flex_justify_start jui_flex_items_center jui_mar_t20">
						<view class="" style="width: 30%;">
							<view class="jui_fc_999 jui_fs30">
								持仓总额
							</view>
							<view class="jui_fc_333 jui_fs30 jui_mar_t12">
								{{taskDetail.total_interest}}
							</view>
						</view>
						<view class="jui_flex_col_center" style="width: 40%;">
							<view class="jui_fc_999 jui_fs30">
								持仓量
							</view>
							<view class="jui_fc_333 jui_fs30 jui_mar_t12">
								{{taskDetail.open_interest}}
							</view>
						</view>
						<view class="" style="text-align: right;width: 30%;">
							<view class="jui_fc_999 jui_fs30">
								基准价
							</view>
							<view class="col jui_fs30 jui_mar_t12">
								{{taskDetail.current_price}}
							</view>
						</view>
					</view>
					<view class="jui_flex jui_flex_justify_start jui_flex_items_center jui_mar_t20">
						<view class="" style="width: 30%;">
							<view class="jui_fc_999 jui_fs30">
								当前价格
							</view>
							<view class="jui_fc_333 jui_fs30 jui_mar_t12">
								{{taskDetail.close}}

							</view>
						</view>
						<view class="jui_flex_col_center" style="width: 40%;">
							<view class="jui_fc_999 jui_fs30">
								当前补仓
							</view>
							<view class="jui_fc_333 jui_fs30 jui_mar_t12">
								{{taskDetail.current_amount}}
							</view>
						</view>
						<view class="" style="text-align: right;width: 30%;">
							<view class="jui_fc_999 jui_fs30">
								交易次数
							</view>
							<view class="jui_fc_333 jui_fs30 jui_mar_t12">
								{{taskDetail.trade_times}}
							</view>
						</view>
					</view>
					<view class="jui_flex jui_flex_justify_start jui_flex_items_center jui_mar_t20">
						<view class="" style="width: 30%;">
							<view class="jui_fc_999 jui_fs30">
								总收益
							</view>
							<view class="jui_fc_333 jui_fs30 jui_mar_t12">
								{{taskDetail.total_profit}}
							</view>
						</view>
						<view class="jui_flex_col_center" style="width: 40%;">
							<view class="jui_fc_999 jui_fs30">
								盈亏幅
							</view>
							<view class="col jui_fs30 jui_mar_t12">
								{{taskDetail.profit_or_loss_percent}}
							</view>
						</view>
						<view class="" style="text-align: right;width: 30%;">
							<view class="jui_fc_999 jui_fs30">
								当前盈亏
							</view>
							<view class="col jui_fs30 jui_mar_t12">
								{{taskDetail.profit_or_loss_price}}
							</view>
						</view>
					</view>
				</view>

				<view class="jui_mar_t20">
					<view class="jui_fs30">
						策略参数
					</view>
					<view class="jui_mar_t12 jui_flex jui_flex_items_center " style="">
						<view class="">
							<text class="jui_fs30 jui_fc_999">首单额度</text>
							<text class="jui_fs30 jui_fc_333 jui_mar_l16">{{taskDetail.position_number}}</text>
						</view>
						<view class="marl">
							<text class="jui_fs30 jui_fc_999">计划做单</text>
							<text class="jui_fs30 jui_fc_333 jui_mar_l16">{{taskDetail.odd_number}}</text>
						</view>
					</view>
					<view class="jui_mar_t12 jui_flex jui_flex_items_center " style="">
						<view class="jui_mar_t12">
							<text class="jui_fs30 jui_fc_999">补仓比例</text>
							<text class="jui_fs30 jui_fc_zhuse jui_mar_l16">{{taskDetail.cover_up_percent}}%</text>
						</view>
						<view class="marl">
							<text class="jui_fs30 jui_fc_999">补仓复位</text>
							<text
								class="jui_fs30 jui_fc_zhuse jui_mar_l16">{{taskDetail.cover_up_reset_percent}}%</text>
						</view>
					</view>
					<view class="jui_mar_t12 jui_flex jui_flex_items_center " style="">
						<view class="">
							<text class="jui_fs30 jui_fc_999">补仓增幅</text>
							<text
								class="jui_fs30 jui_fc_zhuse jui_mar_l16">{{taskDetail.cover_up_increase_percent}}%</text>
						</view>
						<view class="marl">
							<text class="jui_fs30 jui_fc_999">补仓回调</text>
							<text class="jui_fs30 jui_fc_zhuse jui_mar_l16">{{taskDetail.callback_percent}}%</text>
						</view>
					</view>
					<view class="jui_mar_t12" v-if="taskDetail.cover_up_type!='10'">
						<text class="jui_fs30 jui_fc_999">补仓方式</text>
						<text class="jui_fs30 jui_fc_zhuse jui_mar_l16"
							v-if="taskDetail.cover_up_type=='20'">等额补仓</text>
						<text class="jui_fs30 jui_fc_zhuse jui_mar_l16"
							v-if="taskDetail.cover_up_type=='30'">倍数补仓</text>
						<text class="jui_fs30 jui_fc_zhuse jui_mar_l16"
							v-if="taskDetail.cover_up_type=='40'">自定义补仓</text>
					</view>
					<view class="jui_mar_t12 jui_flex jui_flex_items_center " style="">
						<view class="">
							<text class="jui_fs30 jui_fc_999">止盈比例</text>
							<text class="jui_fs30 jui_fc_zhuse jui_mar_l16">{{taskDetail.stop_percent}}%</text>
						</view>
						<view class="marl">
							<text class="jui_fs30 jui_fc_999">盈利回调</text>
							<text class="jui_fs30 jui_fc_zhuse jui_mar_l16">{{taskDetail.fall_back_percent}}%</text>
						</view>
					</view>
				</view>

				<view class="jui_footer jui_flex ">
					<view class="btn" style="background-color:#AB39E9 ;" v-if="type == 30" @tap="xgcl" >
						调整策略
					</view>
					<!-- <view class="btn" style="" @tap="yjpc()">
						全部平仓
					</view> -->
					<view class="btn" @tap="changeCl">
						{{taskDetail.is_auto?'循环策略':'单次策略'}}
					</view>
					<view class="btn" style="" @tap="bucang()">
						一键补仓
					</view>
				</view>
				<uni-popup ref="popup" type="dialog">
					<uni-popup-dialog type="input" message="成功消息" :duration="2000" :before-close="true" @close="close"
						@confirm="confirm" mode="input" title="一键补仓"  placeholder="请输入买入数量(USDT)"></uni-popup-dialog>
				</uni-popup>
				<uni-popup ref="popup1" type="dialog">
					<uni-popup-dialog type="input" message="成功消息" :duration="2000" :before-close="true" @close="close1"
						@confirm="confirm1" mode="input" title="调整策略"  placeholder="请输入首仓单位(单)"></uni-popup-dialog>
				</uni-popup>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import vNavigation from '@/components/navigation/navigation.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			vNavigation,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				naviValue: {
					"l": '/static/imgs/home/back.png',
					"c": '任务详情',
					"r": '交易记录',
					url: '/pages/task/taskDetail/order'
				},
				taskDetail: '',
				type: '',
				name: '',
				titName: '',
				text:'策略循环',
				adjustment:'调整策略'
			}
		},
		onLoad(opt) {
			this.id = opt.id
			this.name = opt.name
			this.type = opt.type;
			if(this.type != 30){
				this.adjustment = '首仓调整'
			}
			this.current = opt.current
			this.strategy_id = opt.strategy_id
			this.naviValue.url = `/pages/task/taskDetail/order?id=${this.id}`
			this.titName = opt.titName
			this.taskdetail()
		},
		methods: {
			changeCl(){
				let data = {
					strategy_type: this.taskDetail.is_auto==0?1:0,
					task_id: this.id
				}
				this.$api.changeStrategy(data).then(res => {
					if (res.code == 1) {
						this.$msg(res.msg);
						setTimeout(()=>{
							this.taskdetail()
						},1000)
						
					}
				});
			},
			bucang(){
				this.$refs.popup.open()
			},
			close(done) {
				done()
			},
			close1(done) {
				done()
			},
			confirm(done, value) {
				// 输入框的值
				console.log(value)
				if (!value) {
					this.$msg('请输入补仓数量')
					return false;
					done()
				} else {
					let data = {
						task_id: this.id,
						amount: value
					}
					this.$api.autoCover(data).then(res => {
						if (res.code == 1) {
							this.$msg(res.msg);
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
							done()
						}
					});
				}
			
				done()
			},
			confirm1(done, value) {
				// 输入框的值
				console.log(value)
				if (!value) {
					this.$msg('请输入首仓单位')
					return false;
					done()
				} else {
					let data = {
						task_id: this.id,
						amount: value
					}
					this.$api.changeFirstNum(data).then(res => {
						if (res.code == 1) {
							this.$msg(res.msg);
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
							done()
						}
					});
				}
			
				done()
			},
			xgcl() {
				console.log(this.type)
				if(this.type == 30){
					let data = {
						name: this.taskDetail.symbol,
						item: this.taskDetail,
						current: this.current,
						strategy_id: this.strategy_id
					}
					uni.navigateTo({
						url: `/pages/task/newTask/newTask?type=1&detail=${JSON.stringify(data)}`
					})
				}
				
			},
			yjpc(item) {
				let data = {
					id: this.id,
				}
				this.$api.batchLiquidation(data).then(res => {
					if (res.code == 1) {
						this.$msg(res.msg)
						setTimeout(() => {
							this.taskdetail()
						}, 1000)

					}
				});
			},
			taskdetail() {
				let data = {
					id: this.id,
				}
				this.$api.getTaskDetail(data).then(res => {
					if (res.code == 1) {
						this.taskDetail = res.data
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	body {
		background: #FFFFFF !important;
	}

	page {
		background: #FFFFFF !important;
	}

	.col {
		color: #12C382;
	}

	.marl {
		margin-left: 80rpx;
	}

	.jui_footer {
		bottom: 20rpx;
		// background-color: ;
		justify-content: space-around;
	}

	.btn {
		width: 30%;
		background-color: #5B08BE;
		height: 80rpx;
		border-radius: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
	}

	.exchange_bg {
		background: #5B08BE;
		padding-top: 90rpx;

		.box {
			padding: 50rpx 30rpx 0 30rpx;
			flex-wrap: wrap;
		}
	}

	.topPlace {
		width: 100%;
		height: var(--status-bar-height);
		background: #5B08BE;

	}

	.text-line {
		width: 28rpx;
		height: 28rpx;
		border: 1px solid $zhuse;
		color: $zhuse;
		font-size: 22rpx;
		text-align: center;
		line-height: 28rpx;
	}

	.text-rad {
		width: 28rpx;
		height: 28rpx;
		border: 1px solid $zhuse;
		color: $zhuse;
		border-radius: 50%;
		font-size: 22rpx;
		text-align: center;
		line-height: 28rpx;
	}

	.on {
		color: $zhuse;
		background-color: #FBF3FF;
		width: 148rpx;
		height: 44rpx;
		font-size: 24rpx;
		margin-left: 40rpx;
	}
</style>
